<template>
	<view class="container">
		<view class="register-box">
			<view class="header">
				<text class="title">注册账号</text>
				<text class="subtitle">欢迎加入我们</text>
			</view>
			
			<view class="form-section">
				<view class="input-item">
					<text class="iconfont icon-user"></text>
					<input type="text" 
						v-model="username" 
						placeholder="请设置账号" 
						placeholder-class="placeholder" />
				</view>
				
				<view class="input-item">
					<text class="iconfont icon-password"></text>
					<input type="password" 
						v-model="password" 
						placeholder="请设置密码" 
						placeholder-class="placeholder" />
				</view>
				
				<view class="input-item">
					<text class="iconfont icon-password"></text>
					<input type="password" 
						v-model="confirmPassword" 
						placeholder="请确认密码" 
						placeholder-class="placeholder" />
				</view>
				
				<view class="register-btn" @click="handleRegister">注 册</view>
				
				<view class="login-link" @click="goToLogin">
					已有账号？去登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			password: '',
			confirmPassword: ''
		}
	},
	methods: {
		handleRegister() {
			if (!this.username || !this.password || !this.confirmPassword) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				});
				return;
			}
			
			if (this.password !== this.confirmPassword) {
				uni.showToast({
					title: '两次密码不一致',
					icon: 'none'
				});
				return;
			}
			
			uni.showToast({
				title: '注册功能暂未开放',
				icon: 'none'
			});
		},
		goToLogin() {
			uni.navigateBack();
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.register-box {
	width: 100%;
	max-width: 400px;
}

.header {
	margin-bottom: 30px;
}

.title {
	font-size: 24px;
	color: #9796B8;
	font-weight: bold;
	margin-bottom: 8px;
	display: block;
}

.subtitle {
	font-size: 14px;
	color: #6E6C89;
}

.form-section {
	background: #2D2D44;
	border-radius: 12px;
	padding: 20px;
}

.input-item {
	display: flex;
	align-items: center;
	background: #1E1E2E;
	border-radius: 8px;
	padding: 12px 15px;
	margin-bottom: 15px;
}

.input-item .iconfont {
	font-size: 20px;
	color: #6E6C89;
	margin-right: 10px;
}

.input-item input {
	flex: 1;
	color: #9796B8;
	font-size: 16px;
}

.placeholder {
	color: #6E6C89;
}

.register-btn {
	background: #9796B8;
	color: #1E1E2E;
	text-align: center;
	padding: 12px;
	border-radius: 8px;
	font-size: 16px;
	margin: 20px 0;
}

.login-link {
	text-align: center;
	color: #6E6C89;
	font-size: 14px;
}
</style> 